import React, { useState, useEffect } from "react";
import { getCourses } from "../api/courseApi";
import CourseList from "../api/CourseList";
import { Link } from "react-router-dom";

function CoursePage() {

  const [ courses, setCourses ] = useState([]);

  useEffect(() => {
    getCourses().then(_courses => { setCourses(_courses) });
  }, []);

  return (
    <React.Fragment>
      <h2>Courses</h2>
      <Link className="btn btn-primary" to="/course">
        Add course
      </Link>
      <CourseList courses={courses}/>
    </React.Fragment>
  );
}

export default CoursePage;